<%--
  Created by IntelliJ IDEA.
  User: xiaodoudou
  Date: 2020/11/6
  Time: 16:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%String path = request.getContextPath();%>
<html>
<head>
    <title>个人资料</title>
    <link rel="stylesheet" href="<%=path%>/static/usercenter/common/css/sapar.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/usercenter/common/css/common.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/usercenter/css/my_info.css" />
    <script type="text/javascript" src="<%=path%>/static/usercenter/common/js/jquery.js"></script>
    <script type="text/javascript" src="<%=path%>/static/usercenter/common/js/sapar.js"></script>
    <script type="text/javascript" src="<%=path%>/static/usercenter/common/js/WdatePicker.js"></script>

    <script type="text/javascript" src="<%=path%>/static/web/js/jquery-3.5.1.min.js"></script>

    <%--    头像css样式--%>
    <style type="text/css">
        .headImage{
            border: 1px solid black;
            width: 80px;
            height: 80px;
            /*成为一个圆*/
            border-radius: 100px;
            overflow: hidden;
            background:azure;
            margin-left: 140px;
            margin-top: 10px;
        }
        .a-upload {
            padding: 5px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1

        }

        .a-upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
    </style>
</head>
<body>


<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>我的资料</h2>
        </div>
        <div class="subfiled-content">
            <div class="tab-container" data-trigger="hover">
                <div class="tab">
                    <a href="javascript:;" class="current">基本信息</a>
                    <a href="<%=path%>/user/usercenter/myinfo/addressManage">地址信息管理</a>
                    <a href="javascript:;">绑定手机</a>
                    <a href="javascript:;">安全设置</a>
                </div>
                <div class="tab-content">
                    <div class="tab-content-item">
                        <form name="f1" id="myform" enctype="multipart/form-data" method="post" action="<%=path%>/user/usercenter/updata">
                            <div  class="kv-item clearfix">
                                <input type="hidden" name="to" value="reg"/>
                                <input type="hidden" name="did" value="0"/>
                                <div class="headImage">
                                    <img src="<%=path%>/static/web/userimage/${sessionScope.loginUser.pic}" alt="" id="headPortrait"
                                         width="100%">
                                </div>
                                <a style="margin-left: 130px;margin-top: 10px;margin-bottom: -5px" href="javascript:;"
                                   class="a-upload">
                                    <input type="file" name="fileToUpload" id="chooseImg"
                                           style="margin-top: 10px;width: 100px">点击这里上传头像
                                </a>
                            </div>

                            <div class="kv-item clearfix">
                                <label><span class="impInfo">*</span>姓名：</label>
                                <div class="kv-item-content" style="line-height:30px;">
                                    <input type="text" name="userName" id="userName" value="${sessionScope.loginUser.userName}">
                                </div>
                                <span></span>
                            </div>
                            <div class="kv-item clearfix" id="sex">
                                <label>性别：</label>
                                <div class="kv-item-content">
                                        <span class="choose">
                                            <input type="radio" id="man" name="sex" value="男">
                                            <span class="text">男</span>
                                        </span>
                                    <span class="choose">
                                            <input type="radio" id="wowan" name="sex" value="女">
                                            <span class="text">女</span>
                                        </span><span class="choose">
                                            <input type="radio" name="sex" id="secrecy" value="保密">
                                            <span class="text">保密</span>
                                        </span>
                                </div>
                            </div>
                            <div class="kv-item clearfix" >
                                <label><span class="impInfo">*</span>电话：</label>
                                <div class="kv-item-content">
                                    <input type="text" id="phone" name="phone"  placeholder="电话" value="${sessionScope.loginUser.phone}">
                                    <span></span>
                                </div>
                            </div>

                            <div class="kv-item address clearfix" id="address">


                                <label><span class="impInfo">*</span>默认地址：</label>
                                <div class="kv-item-content">
                                    <c:if test="${requestScope.address!=null}" var="isAddress">
                                        <select id="urban">
                                            <option selected="selected" id="selectedUrban"> ${requestScope.address.getStreet().getUrban().getName()}</option>
                                            <c:forEach items="${requestScope.urbans}" var="urban" >
                                                <option value="${urban.id}"> ${urban.name}</option>
                                            </c:forEach>
                                        </select>
                                        <select id="street" name="streetId">
                                            <option value="${requestScope.address.getStreet().getId()}">${requestScope.address.getStreet().getName()}</option>
                                        </select>

                                        <input type="text" id="details" name="details" value="${requestScope.address.getDetails()}">
                                        <span id="sign"></span>
                                    </c:if>




                                    <c:if test="${not isAddress}">
                                        <select id="urban">
                                            <option selected="selected" id="selectedUrban">请选择市区</option>
                                            <c:forEach items="${requestScope.urbans}" var="urban" >
                                                <option value="${urban.id}"> ${urban.name}</option>
                                            </c:forEach>
                                        </select>
                                        <select id="street">
                                            <option>请选择街道</option>
                                        </select>
                                        <input type="text" id="details" value="${requestScope.address.getDetails()}">
                                        <span id="sign"></span>
                                    </c:if>

                                </div>
                            </div>
                            <div class="kv-item clearfix">

                                <div class="kv-item-content">
                                    <input class="sapar-btn sapar-btn-recom query-btn" style="margin-left: 115px;margin-top: 10px" type="button"
                                           id="formBtn" value="提交基本资料">
                                </div>
                            </div>

                        </form>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <div id="saper-ft"></div>
</div>
</body>

<%--上传头像--%>
<script type="text/javascript">
    $(function () {

        $('#chooseImg').on('change',function(){
            // 获取文件路径
            var filePath = $(this).val();
            // 截取上传文件的格式为".***"，从而进判断是否为图片格式
            var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
            // 检查是否是图片格式
            if( !fileFormat.match(/.png|.jpg|.jpeg|.gif/) ) {
                alert('上传错误,文件格式必须为：png/jpg/jpeg/gif');
                return;
            }
            //转成可以在本地预览的格式
            var src = window.URL.createObjectURL(this.files[0]);
            // 将图片路径赋值给img中的src
            $('#headPortrait').attr('src',src);
        });
    });
</script>


<%--一开始判断性别--%>
<script type="text/javascript">
    $(function () {
        var sex =  "${sessionScope.loginUser.sex}";
        if(sex=="保密")
        {
            $("#secrecy").prop("checked",true);
        }if(sex=="男")
        {
            $("#man").prop("checked",true);
        }if(sex=="女")
        {
            $("#woman").prop("checked",true);
        }

    })
</script>


<%--城市街道联动--%>
<script>
    $(function(){

        $("#urban").change(changeUrban);

        function changeUrban() {
            var urbanId = $("#urban").val();
            $("#street").html("");
            $("#selectedUrban").remove();
            $.ajax({
                url:"<%=path%>/user/usercenter/changeUrban",
                type:"post",
                async:false,
                data:{"urbanId":urbanId},
                success:function (mes) {
                    for(var i=0;i<mes.length;i++)
                    {
                        var opt = $("<option></option>");//创建option对象
                        opt.html(mes[i].name);//option的内容
                        opt.val(mes[i].id);//option的value属性
                        $("#street").append(opt);//option对象添加到city下拉列表框
                    }
                }
            });//ajax结束
        }
    })
</script>


<%--修改昵称--%>
<script>
    $(function () {

        //改变名字
        $("#userName").blur(changeName);
        //提交按钮点击时间
        $("#formBtn").click(submit);
        //详细地址市区焦点
        $("#details").blur(checkDetails);
        //修改电话
        $("#phone").blur(checkPhone);

        function changeName() {

            var userName= $("#userName").val();
            if(userName==" ")
            {
                $("#userName").parent().next().html("姓名不能为空呦~");
                return false;
            }
            if(userName!=" "){

                if(name.length>10) {
                    $("#userName").parent().next().html("不能超出10位字符呦~");
                    return false;
                }
                var re=/[^\u4E00-\u9FA5]/;
                if(re.test(userName)==true) {
                    $("#userName").parent().next().html("请输入中文~");
                    return false;
                }
                $("#userName").parent().next().html("√");
                return true;
            }

        }

        function checkDetails() {
            var details = $("#details").val();
            if(details=="")
            {
                $("#sign").html("请填写地址呦~");
                return false;
            }
            $("#sign").html("√");
            $("#sign").css("color","green");

            return true;
        }

        function checkPhone() {
            var phone = $("#phone").val();
            if(phone==""){
                $("#phone").next().html("手机号不能为空呦~");
                return false;
            }
            //判断手机号格式;格式对往下走
            var text = /^1[3|4|5|7|8]\d{9}$/;
            flag = text.test(phone);
            if(flag){
                $("#phone").next().html("√");
                $("#phone").next().css("color","green");
                return true;
            }else{
                $("#phone").next().html("格式不对");
                return false;
            }
        }

        //表单提交
        function submit () {
            var flag1 = changeName();
            var flag2 = checkPhone();
            var flag3 = checkDetails();

            if(flag1&&flag2&&flag3)
            {
                $("#myform").submit();
            }

        }
    })
</script>


</html>
